<template>
  <div>
    <div class="container">
      <el-row>
        <el-col :span="5">
          <el-input
            size="small"
            placeholder="用户名/手机号"
            v-model="searchStr"
            class="input-with-select"
          >
            <el-button
              @click="search"
              slot="append"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
        <!-- <el-col :span="2" :offset="17">
          <el-button
            @click="
              currentId = null;
              editVisible = true;
            "
            type="primary"
            size="mini"
            >添加</el-button
          >
        </el-col> -->
        <el-col style="text-align:right;" :span="14"> </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="list"
        tooltip-effect="dark"
        style="width: 100%;margin-top:5px;"
        :height="tableHeight"
        border
        stripe
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column label="姓名" prop="realname" width="70">
        </el-table-column>
        <el-table-column label="身份证号" prop="identity" width="180">
        </el-table-column>
        <el-table-column label="邀请码" prop="inviter" width="120">
        </el-table-column>
        <el-table-column label="地址" prop="street" min-width="200">
        </el-table-column>
        <el-table-column label="申请级别" prop="item_no" width="150">
          <template slot-scope="scope">
            {{ scope.row.agent === 1 ? "社区代理" : "区县代理" }}
          </template>
        </el-table-column>
        <el-table-column label="服务范围" width="250" align="center">
          <template slot-scope="scope">
            <el-cascader
              expand-trigger="hover"
              :options="cityList"
              :value="[
                scope.row.province,
                scope.row.city,
                scope.row.prefecture
              ]"
              placeholder="未知"
              @change=""
              :props="{
                value: 'v',
                label: 'n',
                children: 'c'
              }"
              disabled
              size="mini"
              style="width:220px;"
            >
            </el-cascader>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="230" align="center">
          <template slot-scope="scope">
            <div key="1" v-if="scope.row.is_frozen === -1">
              <el-button
                @click="agentApply(scope.row.id, 0)"
                type="primary"
                size="small"
                >通过</el-button
              >
              <el-button
                @click="agentApply(scope.row.id, 1)"
                type="danger"
                size="small"
                >拒绝</el-button
              >
            </div>
            <div key="2" v-else-if="scope.row.is_frozen === 0">
              已通过
            </div>
            <div key="3" v-else>
              已拒绝
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-bottom-bar">
        <div></div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
          :background="true"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getAgentApplyList, agentApply } from "@/api/agent-mng";
import city from "@/utils/citys.js";
export default {
  name: "AgentApply",
  data() {
    return {
      list: [],
      searchStr: "",
      total: 0,
      size: 0,
      page: 1,
      tableHeight: 0,
      cityList: city,
      currentDetail: null
    };
  },
  watch: {},
  methods: {
    agentApply(id, type) {
      agentApply({
        apply: type,
        id
      }).then(res => {
        if (res.code === 200) {
          this.getAgentApplyList(this.page);
        }
      });
    },
    search() {
      this.getAgentApplyList(1, this.tabName);
    },
    getAgentApplyList(page) {
      getAgentApplyList({
        page,
        condition: this.searchStr ? this.searchStr : null
      }).then(res => {
        if (res.code === 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getAgentApplyList(page);
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 240;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  created() {
    this.getAgentApplyList(1);
    this.changeSize();
  }
};
</script>

<style></style>
